<template>
  <div v-for="(item,index) in list" :key="index" class="postList">
    <div class="titleContainer">
      <h2>{{item.title}}</h2>
    </div>
    <div class="mainContainer">
      <div class="imgContainer">
        <img :src="ctx.$fnc.getImgUrl(item.image)" alt="">
      </div>
      <div class="context">
        <!-- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam sed corrupti ad nobis ea corporis tempora, at quas nisi, quam labore temporibus ipsam quis? Cum natus esse ea eius harum!
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam sed corrupti ad nobis ea corporis tempora, at quas nisi, quam labore temporibus ipsam quis? Cum natus esse ea eius harum!
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam sed corrupti ad nobis ea corporis tempora, at quas nisi, quam labore temporibus ipsam quis? Cum natus esse ea eius harum! -->
        "{{item.content}}"
      </div>
    </div>
    <div class="fotters">
      <!-- <div class="timeC">2020-06-11 10:30:22</div> -->
      <div class="timeC">{{item.createAt}}</div>
    </div>
  </div>
</template>

<script>
import {defineComponent,getCurrentInstance} from 'vue'
export default defineComponent({
  props:{
    list:Object
  },
  setup(props,context){
    const { ctx } = getCurrentInstance()
    return {
      ctx
    }
  }
})
</script>

<style lang="less" scoped>
.postList{
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  border: 1px solid #ccc;
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 0 0 4px #ccc;
  transition: all ease-in-out .2s;
  .titleContainer{
    display: flex;
  }
  .mainContainer{
    display: flex;
    height: 125px;
    margin-top: 20px;
    .imgContainer{
      max-width: 250px;
      min-width: 250px;
      height: 125px;
      >img{
        width: 100%;
        height: 100%;
      }
    }
    .context{
      text-align: justify;
      padding-left: 20px;
    }
  }
  .fotters{
    display: flex;
    padding-top: 20px;
    .timeC{
      color: rgb(113, 113, 113);
    }
  }
  &:hover{
  box-shadow: 0 0 10px #ccc;
  }
}
</style>